<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <script src="js/jquery.min.js"></script>
  <!-- 小心心 -->
  	<script>
		$(function(){
			$("body").click(function(e){
				// 创建div父元素
				var parentDiv = $("<div></div>");
				// 设置属性
				parentDiv.css({
					"width":"20px",
					"height":"20px",
					"position":"absolute",
					"z-index":"10000"
				});
				// 创建一个div容器元素
				var conDiv = $("<div></div>");
				conDiv.css({
					"width":"100%",
					"height":"100%",
					"position":"relative"
				});
				// 将容器元素添加到父元素中
				parentDiv.append(conDiv);
				// 创建子元素
				var childDiv = conDiv.append("<div></div><div></div><div></div>");
				var divs = conDiv.children();
				// 设置颜色随机
				var color = "rgb("+parseInt(Math.random()*250+5)
							+","+parseInt(Math.random()*250+5)
							+","+parseInt(Math.random()*250+5)+")";
				// 设置子元素属性
				$(divs[0]).css({
					"width":"60%",
					"height":"60%",
					"background-color":color,
					"border-radius":"100%"
				});
				$(divs[1]).css({
					"width":"60%",
					"height":"60%",
					"background-color":color,
					"border-radius":"100%",
					"position":"absolute",
					"top":"0",
					"right":"0"
				});
				$(divs[2]).css({
					"width":"60%",
					"height":"60%",
					"background-color":color,
					"position":"absolute",
					"top":"20%",
					"left":"20%",
					"transform":"rotate(45deg)",
					"-ms-transform":"rotate(45deg)",
					"-webkit-transform":"rotate(45deg)"
				});
				// 通过事件对象获取鼠标坐标
				var x = e.pageX;
				var y = e.pageY;
				// 修改div父元素位置
				parentDiv.css({"left":x+"px","top":y+"px"});
				// 添加到body中
				$("body").append(parentDiv);
				// 2秒后消失
				parentDiv.animate({
					"width":"25px",
					"height":"25px",
					"top":(y-200)+"px",
					"opacity":0
				},2000,function(){
					parentDiv.remove();
				});
			});
		});
	</script>
	
	<!-- <script src="js/script.js"></script> -->
	<style>
		#bg {
			position:fixed;
			z-index:-9;
		}
		#bg canvas {
			position:absolute;
			
		}
		</style>
  <body>

	<!-- 雪花 -->
    <!-- <script src='./js/snowflakes.min.js'></script>
	<script src="./js/index.js"></script> -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
	</noscript>

	<div id="bg">
		<canvas></canvas>
		<canvas></canvas>
		<canvas></canvas>
	  </div>

	<div id="app"></div>
	<!-- built files will be auto injected -->
	
	<!-- 泡泡 -->
	<script>
		(function($){
			var canvas = $('#bg').children('canvas'),
				background = canvas[0],
				foreground1 = canvas[1],
				foreground2 = canvas[2],
				config = {
					circle: {
						amount: 18,
						layer: 3,
						// 157, 97, 207 泡泡颜色
						color: [154, 255, 154],
						alpha: 0.3
					},
					line: {
						amount: 12,
						layer: 3,
						color: [255, 255, 255],
						alpha: 0.3
					},
					speed: 0.5,
					angle: 20
				};
		
			if (background.getContext){
				var bctx = background.getContext('2d'),
					fctx1 = foreground1.getContext('2d'),
					fctx2 = foreground2.getContext('2d'),
					M = window.Math, // Cached Math
					degree = config.angle/360*M.PI*2,
					circles = [],
					lines = [],
					wWidth, wHeight, timer;
				
				requestAnimationFrame = window.requestAnimationFrame || 
					window.mozRequestAnimationFrame ||
					window.webkitRequestAnimationFrame ||
					window.msRequestAnimationFrame ||
					window.oRequestAnimationFrame ||
					function(callback, element) { setTimeout(callback, 1000 / 60); };
		
				cancelAnimationFrame = window.cancelAnimationFrame ||
					window.mozCancelAnimationFrame ||
					window.webkitCancelAnimationFrame ||
					window.msCancelAnimationFrame ||
					window.oCancelAnimationFrame ||
					clearTimeout;
		
				var setCanvasHeight = function(){
					wWidth = $(window).width();
					wHeight = $(window).height(),
		
					canvas.each(function(){
						this.width = wWidth;
						this.height = wHeight;
					});
				};
		
				var drawCircle = function(x, y, radius, color, alpha){
					var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0);
					gradient.addColorStop(0, 'rgba('+color[0]+','+color[1]+','+color[2]+','+alpha+')');
					gradient.addColorStop(1, 'rgba('+color[0]+','+color[1]+','+color[2]+','+(alpha-0.1)+')');
		
					fctx1.beginPath();
					fctx1.arc(x, y, radius, 0, M.PI*2, true);
					fctx1.fillStyle = gradient;
					fctx1.fill();
				};
		
				var drawLine = function(x, y, width, color, alpha){
					var endX = x+M.sin(degree)*width,
						endY = y-M.cos(degree)*width,
						gradient = fctx2.createLinearGradient(x, y, endX, endY);
					gradient.addColorStop(0, 'rgba('+color[0]+','+color[1]+','+color[2]+','+alpha+')');
					gradient.addColorStop(1, 'rgba('+color[0]+','+color[1]+','+color[2]+','+(alpha-0.1)+')');
		
					fctx2.beginPath();
					fctx2.moveTo(x, y);
					fctx2.lineTo(endX, endY);
					fctx2.lineWidth = 3;
					fctx2.lineCap = 'round';
					fctx2.strokeStyle = gradient;
					fctx2.stroke();
				};
		
				var drawBack = function(){
					bctx.clearRect(0, 0, wWidth, wHeight);
		
					var gradient = [];
					
					gradient[0] = bctx.createRadialGradient(wWidth*0.3, wHeight*0.1, 0, wWidth*0.3, wHeight*0.1, wWidth*0.9);
					// gradient[0].addColorStop(0, 'rgb(250, 250, 250)');
					// gradient[0].addColorStop(0, 'rgb(240, 255, 255)');
					gradient[0].addColorStop(0, 'rgb(240, 255, 240)');
					// gradient[0].addColorStop(0, 'rgb(255, 236, 139)');
					
					// gradient[0].addColorStop(1, 'transparent');
		
					bctx.translate(wWidth, 0);
					bctx.scale(-1,1);
					bctx.beginPath();
					bctx.fillStyle = gradient[0];
					bctx.fillRect(0, 0, wWidth, wHeight);
		
					// gradient[1] = bctx.createRadialGradient(wWidth*0.1, wHeight*0.1, 0, wWidth*0.3, wHeight*0.1, wWidth);
					// gradient[2].addColorStop(0, 'rgb(175, 238, 238)');
					// // gradient[1].addColorStop(0.8, 'transparent');
		
					// bctx.translate(wWidth, 0);
					// bctx.scale(-1,1);
					// bctx.beginPath();
					// bctx.fillStyle = gradient[1];
					// bctx.fillRect(0, 0, wWidth, wHeight);
		
					// gradient[2] = bctx.createRadialGradient(wWidth*0.1, wHeight*0.5, 0, wWidth*0.1, wHeight*0.5, wWidth*0.5);
					// gradient[1].addColorStop(0, 'rgb(255, 246, 143)');
					// // gradient[2].addColorStop(1, 'transparent');
		
					// bctx.beginPath();
					// bctx.fillStyle = gradient[2];
					// bctx.fillRect(0, 0, wWidth, wHeight);
				};
		
				var animate = function(){
					var sin = M.sin(degree),
						cos = M.cos(degree);
		
					if (config.circle.amount > 0 && config.circle.layer > 0){
						fctx1.clearRect(0, 0, wWidth, wHeight);
						for (var i=0, len = circles.length; i<len; i++){
							var item = circles[i],
								x = item.x,
								y = item.y,
								radius = item.radius,
								speed = item.speed;
		
							if (x > wWidth + radius){
								x = -radius;
							} else if (x < -radius){
								x = wWidth + radius
							} else {
								x += sin*speed;
							}
		
							if (y > wHeight + radius){
								y = -radius;
							} else if (y < -radius){
								y = wHeight + radius;
							} else {
								y -= cos*speed;
							}
		
							item.x = x;
							item.y = y;
							drawCircle(x, y, radius, item.color, item.alpha);
						}
					}
		
					if (config.line.amount > 0 && config.line.layer > 0){
						fctx2.clearRect(0, 0, wWidth, wHeight);
						for (var j=0, len = lines.length; j<len; j++){
							var item = lines[j],
								x = item.x,
								y = item.y,
								width = item.width,
								speed = item.speed;
		
							if (x > wWidth + width * sin){
								x = -width * sin;
							} else if (x < -width * sin){
								x = wWidth + width * sin;
							} else {
								x += sin*speed;
							}
		
							if (y > wHeight + width * cos){
								y = -width * cos;
							} else if (y < -width * cos){
								y = wHeight + width * cos;
							} else {
								y -= cos*speed;
							}
							
							item.x = x;
							item.y = y;
							drawLine(x, y, width, item.color, item.alpha);
						}
					}
		
					timer = requestAnimationFrame(animate);
				};
		
				var createItem = function(){
					circles = [];
					lines = [];
		
					if (config.circle.amount > 0 && config.circle.layer > 0){
						for (var i=0; i<config.circle.amount/config.circle.layer; i++){
							for (var j=0; j<config.circle.layer; j++){
								circles.push({
									x: M.random() * wWidth,
									y: M.random() * wHeight,
									radius: M.random()*(20+j*5)+(20+j*5),
									color: config.circle.color,
									alpha: M.random()*0.2+(config.circle.alpha-j*0.1),
									speed: config.speed*(1+j*0.5)
								});
							}
						}
					}
		
					if (config.line.amount > 0 && config.line.layer > 0){
						for (var m=0; m<config.line.amount/config.line.layer; m++){
							for (var n=0; n<config.line.layer; n++){
								lines.push({
									x: M.random() * wWidth,
									y: M.random() * wHeight,
									width: M.random()*(20+n*5)+(20+n*5),
									color: config.line.color,
									alpha: M.random()*0.2+(config.line.alpha-n*0.1),
									speed: config.speed*(1+n*0.5)
								});
							}
						}
					}
		
					cancelAnimationFrame(timer);
					timer = requestAnimationFrame(animate);
					drawBack();
				};
		
				$(document).ready(function(){
					setCanvasHeight();
					createItem();
				});
				$(window).resize(function(){
					setCanvasHeight();
					createItem();
				});
			}
		})(jQuery);</script>

	<!--网格动态背景开始-->
	<script type="text/javascript">

		!function () {
			//封装方法，压缩之后减少文件大小
			function get_attribute(node, attr, default_value) {
				return node.getAttribute(attr) || default_value;
			}

			//封装方法，压缩之后减少文件大小
			function get_by_tagname(name) {
				return document.getElementsByTagName(name);
			}

			//获取配置参数
			function get_config_option() {
				var scripts = get_by_tagname("script"),
					script_len = scripts.length,
					script = scripts[script_len - 1]; //当前加载的script
				return {
					l: script_len, //长度，用于生成id用
					z: get_attribute(script, "zIndex", -1), //z-index
					o: get_attribute(script, "opacity", 0.8), //opacity
					c: get_attribute(script, "color", "255,255,255"), //color
					n: get_attribute(script, "count", 200) //count
				};
			}

			//设置canvas的高宽
			function set_canvas_size() {
				canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
					canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			}

			//绘制过程
			function draw_canvas() {
				context.clearRect(0, 0, canvas_width, canvas_height);
				//随机的线条和当前位置联合数组
				var e, i, d, x_dist, y_dist, dist; //临时节点
				//遍历处理每一个点
				random_points.forEach(function (r, idx) {
					r.x += r.xa,
						r.y += r.ya, //移动
						r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
						r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
						context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
					//从下一个点开始
					for (i = idx + 1; i < all_array.length; i++) {
						e = all_array[i];
						// 当前点存在
						if (null !== e.x && null !== e.y) {
							x_dist = r.x - e.x; //x轴距离 l
							y_dist = r.y - e.y; //y轴距离 n
							dist = x_dist * x_dist + y_dist * y_dist; //总距离, m

							dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
								d = (e.max - dist) / e.max,
								context.beginPath(),
								context.lineWidth = d / 2,
								context.strokeStyle = "#68aaf5",	// 线条颜色
								context.moveTo(r.x, r.y),
								context.lineTo(e.x, e.y),
								context.stroke());
						}
					}
				}), frame_func(draw_canvas);
			}

			//创建画布，并添加到body中
			var the_canvas = document.createElement("canvas"), //画布
				config = get_config_option(), //配置
				canvas_id = "c_n" + config.l, //canvas id
				context = the_canvas.getContext("2d"), canvas_width, canvas_height,
				frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
					window.setTimeout(func, 1000 / 40);
				}, random = Math.random,
				current_point = {
					x: null, //当前鼠标x
					y: null, //当前鼠标y
					max: 20000 // 圈半径的平方
				},
				all_array;
			the_canvas.id = canvas_id;
			the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
			get_by_tagname("body")[0].appendChild(the_canvas);

			//初始化画布大小
			set_canvas_size();
			window.onresize = set_canvas_size;
			//当时鼠标位置存储，离开的时候，释放当前位置信息
			window.onmousemove = function (e) {
				e = e || window.event;
				current_point.x = e.clientX;
				current_point.y = e.clientY;
			}, window.onmouseout = function () {
				current_point.x = null;
				current_point.y = null;
			};
			//随机生成config.n条线位置信息
			for (var random_points = [], i = 0; config.n > i; i++) {
				var x = random() * canvas_width, //随机位置
					y = random() * canvas_height,
					xa = 2 * random() - 1, //随机运动方向
					ya = 2 * random() - 1;
				// 随机点
				random_points.push({
					x: x,
					y: y,
					xa: xa,
					ya: ya,
					max: 5000 //沾附距离
				});
			}
			all_array = random_points.concat([current_point]);
			//0.1秒后绘制
			setTimeout(function () {
				draw_canvas();
			}, 500);
		}();
	</script>
  </body>

</html>

